<template>
	<view class="add_si_liao_box" :style="{height: windowHeight + 'px'}">
		<!-- 标题 -->
		<view class="title_box pv_20 text_center relative">
			<text class="absolute left_center title vertical_text mn fs_36_i mainColor fw_bold">ᠪᠣᠷᠳᠤᠭ᠎ᠠ ᠨᠡᠮᠡᠬᠦ</text>
		</view>
		
		<!-- 内容 -->
		<view class="content_box ph_20 relative">
			<!-- 添加图片 -->
			<view class="img_box w_full bgc_fff border_radius_10">
				
			</view>
			
			<!-- 饲料类型 -->
			<view class="si_liao_lei_xing w_full h_140 flex_row_between bgc_fff border_radius_10 p_20 border_box mt_20">
				<view class="title">
					<text class="vertical_text mn fs_40 h_140 text_center ws_normal">ᠪᠣᠷᠳᠤᠭᠠᠨ᠎ᠤ ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ</text>
				</view>
				
				<view class="select_box w_40_p">
					<uni-data-select v-model="siLiaoType" :localdata="selectType" placeholder=" " />
				</view>
			</view>
			
			<!-- 饲料信息 -->
			<view class="si_liao_info w_full bgc_fff border_radius_10 p_10 border_box mt_20">
				<!-- 饲料名称 -->
				<view class="info_item w_full h_120 p_10 border_box flex_row_between">
					<view class="title w_20_p">
						<text class="h_100 text_center ws_normal vertical_text mn fs_40 fw_500">ᠪᠣᠷᠳᠤᠭᠠᠨ᠎ᠤ ᠨᠡᠷᠡᠢᠳᠦᠯ</text>
					</view>
					
					<view class="text w_40_p">	
						<editor
							id="editor_si_liao_name" 
							class="ws_normal vertical_text mn fs_34" 
							placeholder="ᠪᠣᠷᠳᠤᠭᠠᠨ᠎ᠤ ᠨᠡᠷ᠎ᠡ"
							@ready="onEditorSiLiaoNameReady()" 
							@input="getEditorSiLiaoName">
						>
						</editor>
					</view>
				</view>
				
				<!-- 饲料厂家 -->
				<view class="info_item w_full h_120 p_10 border_box flex_row_between mt_20">
					<view class="title w_20_p">
						<text class="h_100 text_center ws_normal vertical_text mn fs_40 fw_500">ᠪᠣᠷᠳᠤᠭᠠᠨ᠎ᠤ ᠦᠢᠯᠡᠳᠪᠦᠷᠢ</text>
					</view>
					
					<view class="text w_40_p">	
						<editor
							id="editor_si_liao_name" 
							class="ws_normal vertical_text mn fs_34" 
							placeholder="ᠦᠢᠯᠡᠳᠪᠦᠷᠢ᠎ᠶᠢᠨ ᠨᠡᠷᠡᠢᠳᠦᠯ"
							@ready="onEditorSiLiaoNameReady()" 
							@input="getEditorSiLiaoName">
						>
						</editor>
					</view>
				</view>
				
				<!-- 采购量 -->
				<view class="info_item w_full h_120 p_10 border_box flex_row_between mt_20">
					<view class="title w_20_p">
						<text class="h_100 text_center ws_normal vertical_text mn fs_40 fw_500">ᠬᠤᠳᠠᠯᠳᠤᠨ ᠠᠪᠤᠭᠰᠠᠨ ᠬᠡᠮᠵᠢᠶ᠎ᠡ (kg)</text>
					</view>
					
					<view class="text w_40_p">	
						<input type="number" placeholder="xxx">
					</view>
				</view>
				
				<!-- 金额 -->
				<view class="info_item w_full h_120 p_10 border_box flex_row_between mt_20">
					<view class="title w_20_p">
						<text class="h_100 text_center ws_normal vertical_text mn fs_40 fw_500">ᠵᠣᠭᠤᠰᠤᠨ ᠲᠣᠭ᠎ᠠ</text>
					</view>
					
					<view class="text w_40_p">	
						<input type="number" placeholder="xx.xx">
					</view>
				</view>
			</view>
		
			<!-- 购买时间 -->
			<view class="buy_time w_full h_120 flex_row_between bgc_fff border_radius_10 p_20 border_box mt_20">
				<view class="title">
					<text class="vertical_text mn fs_40 h_100 text_center ws_normal fw_500">ᠬᠤᠳᠠᠯᠳᠤᠨ ᠠᠪᠤᠭᠰᠠᠨ ᠴᠠᠭ</text>
				</view>
				
				<view class="select_box w_40_p flex_row_around">
					<view class="select">
						<input type="number" class="text_center mb_10" v-model="buyYear" placeholder="2021">
					</view>
					
					<view class="year">
						<text class="vertical_text mn fs_40 h_100 text_center ws_normal">ᠤᠨ</text>
					</view>
					
					<view class="">
						<input type="number" class="text_center mb_10" v-model="buyMonth" placeholder="6">
					</view>
					
					<view class="month">
						<text class="vertical_text mn fs_40 h_100 text_center ws_normal">ᠰᠠᠷ᠎ᠠ</text>
					</view>
					
				</view>
			</view>
			
			<!-- 确定按钮 -->
			<view class="w_full h_80 lh_80 text_center bgc_1c9aa0 absolute left_0 bottom_0">
				<text class="h_full text_center vertical_text mn fs_40 color_fff">ᠨᠡᠮᠡᠬᠦ</text>
			</view>
		</view>
	
	</view>
</template>

<script>
	import getSystemInfo from '../../mixins/basic.js'
	import NET from '@/utils/request.js'
	import API from '@/config/api.js'
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				siLiaoType: '',
				siLiaoName: '',
				selectType: [
					{ value: 0, text: "ᠰᠣᠩᠭᠤᠯᠲᠠ 1" },
					{ value: 1, text: "ᠰᠣᠩᠭᠤᠯᠲᠠ 2" },
					{ value: 2, text: "ᠰᠣᠩᠭᠤᠯᠲᠠ 3" }
				],
				
				buyYear: '',
				buyMonth: '',
				selectBuyYear: [
					{ value: 0, text: "2020" },
					{ value: 1, text: "2021" },
					{ value: 2, text: "2022" },
					{ value: 3, text: "2023" }
				],
				selectBuyMonth: [
					{ value: 0, text: "1" },
					{ value: 1, text: "2" },
					{ value: 2, text: "3" },
					{ value: 3, text: "4" },
					{ value: 4, text: "5" },
					{ value: 5, text: "6" },
					{ value: 6, text: "7" },
					{ value: 7, text: "8" },
					{ value: 8, text: "9" },
					{ value: 9, text: "10" },
					{ value: 10, text: "11" },
					{ value: 11, text: "12" }
				]
			}
		},
		
		onLoad() {
			// 获取设备高度
			this.getSystemHeight()
		},
		
		methods: {
			onEditorSiLiaoNameReady(){
				uni.createSelectorQuery().select('#editor_si_liao_name').context(res => {   
					this.siLiaoName = res.context    
					this.siLiaoName.setContents({    
						html: ''
					})    
				}).exec()    
			},
			
			getEditorSiLiaoName(e){
				this.siLiaoName = (e.detail.text).substring(0, e.detail.text.length - 1);
			},
			
			toggleSelector() {},
			
			// 选择图片
			chooseImg() {
				let that = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],  
					sourceType: ['album', 'camera'], 
					success: function (res) {
						console.log(res)
						
						for (let i in res.tempFilePaths) {
							let params = {
								file: res.tempFilePaths[i],
								type: 'image'
							}
							
							NET.upload(API.uploadFile, params, res.tempFiles[i].path)
							.then(res => {
								let respon = JSON.parse(res)
								if (respon.code == 200) {						
									that.imgList.push(respon.data)
								}
							})
							.catch(err => {
								uni.showToast({
									title: '图片上传失败！',
									icon: 'none'
								})
								console.error('图片上传失败！', err)
							})
						}
					}
				})
			},
			
			// 删除图片
			deleteImg(index) {
				this.imgList.splice(index, 1)
			},

		}
	}
</script>

<style lang="less" scoped>
	.active_tab { border-bottom: 8rpx solid #ffa500; }
	
	.add_si_liao_box {
		width: 100%;
		position: relative;
		
		// 标题
		.title_box {
			width: 80rpx;
			height: 100%;
			text-align: center;
			float: left;
			background-color: #f7f7f7;
			box-sizing: border-box;
			// border: 1px solid #f00;
		}
	
		// 内容
		.content_box {
			width: calc(100% - 80rpx);
			height: 100%;
			margin-left: 80rpx;
			background-color: #f7f7f7;
			box-sizing: border-box;
			// border: 1px solid #f00;
			
			.img_box {
				height: 230rpx;
			}
			
			.si_liao_lei_xing {
				.title { font-weight: 500 !important; }
			}
			
			.si_liao_info {
				.info_item {
					
					.text {
						height: 100%;
						
						input {
							width: 100%;
							height: 100%;
							white-space: normal;
						}
						
						#editor_si_liao_name {
							width: 100%;
						}

					}
				}
			}
		}
	}
</style>

<style lang="less">
	@import url('~@/static/css/plugin.css');
	
	.ql-container { height: 120rpx !important; min-height: 120rpx; text-align: center !important; white-space: normal !important; }
	
	.select_box {
		.uni-select__input-placeholder, .uni-select__input-text {
			font-size: 40rpx !important;
		}
		
		.uni-select__selector-scroll {
			white-space: normal;
			padding: 10rpx !important;
			
			.uni-select__selector-item {
				float: left;
				padding: 0 10rpx !important;
				line-height: 30rpx !important;
				
				text {
					writing-mode: vertical-lr;
					font-family: 'mn';
					font-size: 40rpx !important;
					padding: 0 10rpx;
				}
			}
		}
		
		.uni-select__input-text {
			writing-mode: vertical-lr;
			font-family: 'mn';
			font-size: 40rpx !important;
		}
	}
	
</style>